#watch-page-skeleton {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    box-sizing: border-box
}

#watch-page-skeleton #info-container,#watch-page-skeleton #related {
    box-sizing: border-box
}

.watch-skeleton .text-shell {
    height: 20px;
    border-radius: 2px
}

.watch-skeleton .skeleton-bg-color {
    background-color: hsl(0,0%,89%)
}

.watch-skeleton .skeleton-light-border-bottom {
    border-bottom: 1px solid hsl(0,0%,93.3%)
}

html[dark] .watch-skeleton .skeleton-bg-color {
    background-color: hsl(0,0%,16%)
}

html[dark] .watch-skeleton .skeleton-light-border-bottom {
    border-bottom: 1px solid hsla(0,100%,100%,.08)
}

.watch-skeleton .flex-1 {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-flex-basis: .000000001px;
    flex-basis: .000000001px
}

.watch-skeleton #primary-info {
    height: 64px;
    padding: 20px 0 8px
}

.watch-skeleton #primary-info #title {
    width: 400px;
    margin-bottom: 12px
}

.watch-skeleton #primary-info #info {
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center
}

.watch-skeleton #primary-info #info #count {
    width: 200px
}

.watch-skeleton #primary-info #info #menu {
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    padding-right: 8px
}

.watch-skeleton #primary-info .menu-button {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-left: 20px
}

.watch-skeleton #secondary-info {
    height: 151px;
    margin-bottom: 24px;
    padding: 16px 0
}

.watch-skeleton #secondary-info #top-row,.watch-skeleton #secondary-info #top-row #video-owner {
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row
}

.watch-skeleton #secondary-info #top-row #video-owner #channel-icon {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    margin-right: 16px
}

.watch-skeleton #secondary-info #top-row #video-owner #upload-info {
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center
}

.watch-skeleton #secondary-info #top-row #video-owner #upload-info #owner-name {
    width: 200px;
    margin-bottom: 12px
}

.watch-skeleton #secondary-info #top-row #video-owner #upload-info #published-date {
    width: 200px
}

.watch-skeleton #secondary-info #top-row #subscribe-button {
    width: 137px;
    height: 36px;
    border-radius: 2px;
    margin: 7px 4px 0 0
}

#watch-page-skeleton #related {
    float: right;
    position: relative;
    clear: right;
    max-width: 426px;
    width: calc(100% - 640px)
}

#watch-page-skeleton.theater #related {
    width: 100%
}

.watch-skeleton #related .autoplay {
    margin-bottom: 16px
}

.watch-skeleton #related[playlist] .autoplay {
    border-bottom: none;
    margin-bottom: 0
}

.watch-skeleton #related #upnext {
    height: 20px;
    width: 120px;
    margin-bottom: 14px
}

.watch-skeleton #related[playlist] #upnext {
    display: none
}

.watch-skeleton #related .video-details {
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    padding-bottom: 8px
}

.watch-skeleton #related:not([playlist]) .autoplay .video-details {
    padding-bottom: 16px
}

.watch-skeleton #related .video-details .thumbnail {
    height: 94px;
    width: 168px;
    margin-right: 8px
}

.watch-skeleton #related .video-details .video-title {
    width: 200px;
    margin-bottom: 12px
}

.watch-skeleton #related .video-details .video-meta {
    width: 120px
}

@media (max-width: 999px) {
    #watch-page-skeleton {
        width:854px
    }

    #watch-page-skeleton #container {
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column
    }

    #watch-page-skeleton #info-container {
        order: 1
    }

    #watch-page-skeleton #related {
        order: 2;
        width: 100%;
        max-width: 100%
    }
}

@media (max-width: 856px) {
    #watch-page-skeleton {
        width:640px
    }
}

@media (max-width: 656px) {
    #watch-page-skeleton {
        width:426px
    }
}

@media (min-width: 882px) {
    #watch-page-skeleton.theater {
        width:100%;
        max-width: 1706px;
        padding: 0 32px
    }

    #watch-page-skeleton.theater #related {
        margin-top: 0
    }

    #watch-page-skeleton.theater #info-container>* {
        margin-right: 24px
    }
}

@media (min-width: 1000px) {
    #watch-page-skeleton {
        width:100%;
        max-width: 1066px
    }

    #watch-page-skeleton #related {
        margin-top: -360px;
        padding-left: 24px
    }

    #watch-page-skeleton #info-container {
        width: 640px
    }

    #watch-page-skeleton.theater #info-container {
        width: 100%;
        padding-right: 426px
    }
}

@media (min-width: 1294px) and (min-height:630px) {
    #watch-page-skeleton {
        width:100%;
        max-width: 1280px
    }

    #watch-page-skeleton #related {
        margin-top: -480px
    }

    #watch-page-skeleton #info-container {
        width: 854px
    }
}

@media (min-width: 1720px) and (min-height:980px) {
    #watch-page-skeleton {
        width:100%;
        max-width: 1706px
    }

    #watch-page-skeleton #related {
        margin-top: -720px
    }

    #watch-page-skeleton #info-container {
        width: 1280px
    }
}
